<template>
  <div>
    <div class="ui center aligned grid" style="z-index: 3;position: relative;">
      <div class="column">
        <h2 class="ui teal image header" style="margin-top:32px;margin-bottom:32px">
          <div>
            <div>
              <div>
                <a
                  class="header-logo"
                  href="https://github.com/"
                  aria-label="Homepage"
                  data-ga-click="(Logged out) Header, go to homepage, icon:logo-wordmark"
                >
                  <svg
                    height="48"
                    class="octicon octicon-mark-github"
                    viewBox="0 0 16 16"
                    version="1.1"
                    width="48"
                    aria-hidden="true"
                  >
                    <path
                      fill-rule="evenodd"
                      d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"
                    ></path>
                  </svg>
                </a>
              </div>
            </div>
          </div>
        </h2>
        <form class="ui large form">
          <div style="margin-bottom:15px">
            <h1 style="font-size: 24px;font-weight: 300;letter-spacing: -.5px;">登录到Tuery</h1>
          </div>
          <div class="ui stacked segment">
            <div class="field" :class="{
              'error':errors.has('username')}">
              <label>用户名</label>
              <div class="ui left icon input">
                <i class="user icon"></i>
                <input
                  type="text"
                  name="username"
                  placeholder="用户名"
                  v-model="username"
                  v-validate.continues="`required|min:1`"
                >
              </div>
            </div>
            <sui-message v-if="errors.has('username')">
              <p>{{ errors.first('username') }}</p>
            </sui-message>
            <div class="field" :class="{
              'error':errors.has('password')}">
              <label>密码</label>
              <label style="float:right;font-size: .7em;">
                <a>忘记密码?</a>
              </label>
              <div class="ui left icon input">
                <i class="lock icon"></i>
                <input
                  type="password"
                  name="password"
                  placeholder="Password"
                  v-model="password"
                  v-validate="{ required: true, min: 6 }"
                >
              </div>
              <sui-message v-if="errors.has('password')">
                <p>{{ errors.first('password') }}</p>
              </sui-message>
            </div>
            <div class="ui fluid large teal submit button" @click.prevent="handleSubmit">登录</div>
          </div>

          <div class="ui error message"></div>
        </form>

        <div class="ui message">
          <span style="margin-right:3px">初次登陆 Tuery?</span>
          <a @click="$router.push('/up')">创建一个账户.</a>
        </div>
        <div class="ui footer container">
          <ul class="list-style-none">
            <li class="mr-3">
              <a>团队</a>
            </li>
            <li class="mr-3">
              <a>私人</a>
            </li>
            <li class="mr-3">
              <a>安全</a>
            </li>
            <li>
              <a class="link-gray">关于 Tquery</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div id="login-bg">
      <div id="bg1" :style="{backgroundImage: 'url(' + img1 + ')',}"></div>
      <div id="bg2" :style="{backgroundImage: 'url(' + img2 + ')',}"></div>
      <div id="bg3" :style="{backgroundImage: 'url(' + img3 + ')',}"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "In",
  data() {
    return {
      username: "",
      password: "",
      submitted: false,
      img1: require("@/assets/images/bg01.jpg"),
      img2: require("@/assets/images/bg02.jpg"),
      img3: require("@/assets/images/bg03.jpg")
    };
  },
  computed: {
    loggingIn() {
      return this.$store.state.authentication.status.loggingIn;
    }
  },
  created() {
    // reset login status
    this.$store.dispatch("authentication/logout");
  },
  mounted() {
    this.bgHander();
  },
  methods: {
    bgHander() {
      var settings = {
        delay: 6000
      };
      let pos = 0;
      let lastPos = 0;
      let $bgs = [];
      const $bg1 = document.getElementById("bg3");
      const $bg2 = document.getElementById("bg2");
      const $bg3 = document.getElementById("bg1");
      window.canUse = function(p) {
        if (!window._canUse) window._canUse = document.createElement("div");
        var e = window._canUse.style,
          up = p.charAt(0).toUpperCase() + p.slice(1);
        return (
          p in e ||
          "Moz" + up in e ||
          "Webkit" + up in e ||
          "O" + up in e ||
          "ms" + up in e
        );
      };
      $bgs.push($bg1);
      $bgs.push($bg2);
      $bgs.push($bg3);
      $bgs[pos].classList.add("visible");
      $bgs[pos].classList.add("top");

      // Bail if we only have a single BG or the client doesn't support transitions.
      if ($bgs.length == 1 || !canUse("transition")) return;
      window.setInterval(function() {
        lastPos = pos;
        pos++;
        // Wrap to beginning if necessary.
        if (pos >= $bgs.length) pos = 0;
        // Swap top images.
        $bgs[lastPos].classList.remove("top");
        $bgs[pos].classList.add("visible");
        $bgs[pos].classList.add("top");

        // Hide last image after a short delay.
        window.setTimeout(function() {
          $bgs[lastPos].classList.remove("visible");
        }, settings.delay / 2);
      }, settings.delay);
    },
    handleSubmit(e) {
      console.log("success");
      this.submitted = true;
      const { username, password } = this;
      this.$validator.validate().then(valid => {
        if (valid) {
          //alert("SUCCESS!! :-)\n");
        }
      });
      const { dispatch } = this.$store;
      if (username && password) {
        dispatch("authentication/login", { username, password });
      }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
a {
  cursor: pointer;
}
.center .grid {
  height: 100%;
  @media (max-width: 512px) {
    width: 100%;
    margin: 0;
  }
}
.image {
  margin-top: -100px;
}
.column {
  max-width: 348px;
}
.list-style-none {
  list-style-type: none;
  display: flex !important;
  justify-content: center !important;
  margin-bottom: 0;
  margin-top: 40px;
  padding-left: 0;
  padding-top: 40px;
  @media (max-width: 760px) {
    font-size: 12px !important;
    padding-top: 0px;
    padding-bottom: 40px;
  }
}
.mr-3 {
  margin-right: 16px !important;
}
.ui.form .field > label {
  float: left;
  margin-left: 3px;
}
#login-bg {
  -moz-transition: opacity 2s ease-in-out;
  -webkit-transition: opacity 2s ease-in-out;
  -ms-transition: opacity 2s ease-in-out;
  transition: opacity 2s ease-in-out;
  height: 100%;
  left: 0;
  opacity: 0.1;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
}
#login-bg div {
  -moz-transition: opacity 3s ease, visibility 3s;
  -webkit-transition: opacity 3s ease, visibility 3s;
  -ms-transition: opacity 3s ease, visibility 3s;
  transition: opacity 3s ease, visibility 3s;
  background-size: cover;
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  visibility: hidden;
  width: 150%;
}
#login-bg div.visible {
  -moz-animation: bg 45s linear infinite;
  -webkit-animation: bg 45s linear infinite;
  -ms-animation: bg 45s linear infinite;
  animation: bg 45s linear infinite;
  opacity: 1;
  visibility: visible;
  z-index: 1;
}
#login-bg div.visible.top {
  z-index: 2;
}
@media screen and (max-width: 1280px) {
  #login-bg div.visible {
    -moz-animation: bg 29.25s linear infinite;
    -webkit-animation: bg 29.25s linear infinite;
    -ms-animation: bg 29.25s linear infinite;
    animation: bg 29.25s linear infinite;
  }
}
@media screen and (max-width: 736px) {
  #login-bg div.visible {
    -moz-animation: bg 18s linear infinite;
    -webkit-animation: bg 18s linear infinite;
    -ms-animation: bg 18s linear infinite;
    animation: bg 18s linear infinite;
  }
}
#login-bg div:only-child {
  -moz-animation-direction: alternate !important;
  -webkit-animation-direction: alternate !important;
  -ms-animation-direction: alternate !important;
  animation-direction: alternate !important;
}
body.is-loading #login-bg {
  opacity: 0;
}
@keyframes bg {
  0% {
    -moz-transform: translateX(0);
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -moz-transform: translateX(-25%);
    -webkit-transform: translateX(-25%);
    -ms-transform: translateX(-25%);
    transform: translateX(-25%);
  }
}
</style>
